<template>
  <div class="common-aside">
    <!-- 图片 -->
    <div class="logo">
      <img :src="
        $store.state.base.navCollapse
          ? require('../../../assets/close.jpg')
          : require('../../../assets/logo.png')
      " width="50px" alt="" />
    </div>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" text-color="#fff" active-text-color="#fff"
      background-color="#545c64" router :collapse-transition="false" :collapse="$store.state.base.navCollapse">
      <!-- 主页 -->
      <div v-for="nav in $store.state.authority.flexNav" :key="nav.label">
        <el-menu-item :index="nav.path" v-if="!nav.children">
          <i :class='nav.icon'></i>
          <span slot="title">{{nav.label}}</span>
        </el-menu-item>
        <!-- 用户管理 -->
        <el-submenu :index="nav.label" v-if="nav.children">
          <template slot="title">
            <i :class="nav.icon"></i>
            <span>{{nav.label}}</span>
          </template>
          <el-menu-item-group v-for="inNav in nav.children" :key="inNav.label">
            <el-menu-item :index="inNav.path">
              <i :class="inNav.icon"></i>
              <span> {{inNav.label}}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
// 点击激活色

.common-aside {

  // 取消内边距
  .el-menu-vertical-demo {
    ::v-deep .el-menu-item-group__title {
      padding: 0px;
    }
  }

  i {
    margin-right: 10px;
  }

  .is-active {
    background-color: #f77722 !important;
  }
  .logo{
    text-align: center;
  }
  // 给圆角
  .el-submenu {
    .is-active {
      box-shadow: 0px 0px 2px #bdc8ff !important;
    }
  }

}
</style>
